<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体图标的使用</title>
		<!-- 设置移动端比例是1比1，在电脑和手机上看到的大小是一致的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4467101_wbctub5tecr.css" />
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.navi{
				width: 100%;
				height: 80px;
				background-color: aquamarine;
				position: fixed;
				bottom: 0px;
				z-index: 9999;
			}
			.ul-icon{
				list-style: none;
				width: 100%;
				height: 180px;
			}
			.ul-icon > li{
				width: 20%;
				float: left;
				height: 80px;
				text-align: center;
				line-height: 80px;
			}
			.ul-icon > li > i{
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<!-- 底部导航 -->
		<div class="navi">
			<ul class="ul-icon">
				<li>
					<i class="iconfont icon-shouye"></i>
				</li>
				<li>
					<i class="iconfont icon-qianbao"></i>
				</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>`
		</div>
	</body>
</html>